<template>
	 <el-container>
	    
	    <el-main style="">
		  
		  <div class="" style="position: relative; padding-bottom: 10px;">
			  <el-button type="primary" @click="handleAdd">添加<i class="el-icon-circle-plus-outline"></i></el-button>
			  
			  <el-input v-model="notice_title" style="width: 200px; padding-left: 0px; margin-left: 5px;" placeholder="请输入标题" suffix-icon="el-icon-search"></el-input>
			  <el-button style="margin-left: 5px;" @click="load" >搜索</el-button>
			  <el-button type="warning"  style="margin-left: 5px;" @click="reset" >重置</el-button>
		  </div>
		  
	      <el-table :data="tableData"  >
			
	        <el-table-column prop="notice_id" label="序号" width="160">
	        </el-table-column>
	        <el-table-column prop="create_time" label="创建时间" width="160">
	        </el-table-column>
	        <el-table-column prop="notice_title" label="公告标题" width="160">
	        </el-table-column>
			<el-table-column prop="notice_article" label="公告内容" width="160">
			</el-table-column>
			<el-table-column prop="user_nichen" label="作者昵称" width="160">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="success" @click="HandleExit(scope.row)">修改<i class="el-icon-edit"></i></el-button>
					
					<el-popconfirm
					  
					  confirm-button-text='确定'
					  cancel-button-text='我再想想'
					  icon="el-icon-info"
					  icon-color="red"
					  title="这是一段内容确定删除吗？"
					  @confirm= "del(scope.row.notice_id)"
					>
					  <el-button type="danger" slot="reference" style="margin-left: 5px;">删除<i class="el-icon-remove-outline"></i></el-button>
					</el-popconfirm>
					
					
				</template>
			</el-table-column>
	      </el-table>
		  <div class="" style="padding: 10px 0;">
		  	    <el-pagination
				  :current-page="pageNum"
		  	      @size-change="handleSizeChange"
		  	      @current-change="handleCurrentChange"
		  	      :page-sizes="[2, 5, 10, 20]"
		  	      :page-size="pageSize"
		  	      layout="total, sizes, prev, pager, next, jumper"
		  	      :total="total">
		  	    </el-pagination>

		  </div>
		  
		 <el-dialog title="添加公告" :visible.sync="dialogFormVisible" width="30%">
		   <el-form label-width="100px" size="small">
		     <el-form-item label="公告标题">
		       <el-input v-model="form.notice_title" autocomplete="off"></el-input>
		     </el-form-item>
			 <el-form-item label="公告内容">
			   <el-input v-model="form.notice_article" autocomplete="off"></el-input>
			 </el-form-item>
			 <el-form-item label="创建作者">
			   <el-input v-model="form.user_nichen" autocomplete="off"></el-input>
			 </el-form-item>
		   </el-form>
		   <div slot="footer" class="dialog-footer">
		     <el-button @click="dialogFormVisible = false">取 消</el-button>
		     <el-button type="primary" @click="save">确 定</el-button>
		   </div>
		 </el-dialog>
		  
		  
	    </el-main>
	  </el-container>
</template>

<script>
	import request from '../../utils/zht/request.js'
	export default {
	    data() {
	      
	      return {
			
			dialogFormVisible:false,
			form:{},
			notice_title:'',
			pageNum:1,
			pageSize:2,
			total:0,
	        tableData: []
	      }
	    },
		created() {
			//请求分页查询
			this.load()
		},
		methods:{
			
			
			save() {
				
				request.post("/notice", this.form).then(res =>{
					if(res){
						this.$message.success("保存成功")
						this.dialogFormVisible =false
						this.load()
					}else{
						
						this.$message.error("保存失败")
						
					}
					
				})
				
			},
			
			HandleExit(row){
				
				this.form= row
				this.dialogFormVisible =true
				
			},
			
			del(notice_id){
				
				request.delete("/notice/"+ notice_id).then(res =>{
					if(res){
						this.$message.success("删除成功")
						this.load()
					}else{
						
						this.$message.error("删除失败")
						
					}
					
				})
				
			},

			
			handleAdd(){
				this.dialogFormVisible = true
				this.form = {}
			},
			
			reset(){
				this.pageNum = 1
				this.pageSize =2
				this.notice_title =""
				this.load()
			},
			
			load(){
				
				request.get("/notice/page" ,{
					params: {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						notice_title:this.notice_title
					}
				}).then(res =>{
					console.log(res)
					this.tableData = res.data
					this.total =res.total
				})
				
				/* fetch('http://localhost:9090/notice/page?pageNum=' + this.pageNum + '&pageSize=' + this.pageSize +'&notice_title='+ this.notice_title)
				.then(res => res.json()).then(res =>{
					console.log(res)
					this.tableData = res.data
					this.total =res.total
				}) */
				
			},
			
			handleSizeChange(pageSize) {
				console.log(`每页 ${pageSize} 条`);
				this.pageSize = pageSize
				this.load()
			},
			handleCurrentChange(pageNum) {
				console.log(`当前页: ${pageNum}`);
				this.pageNum = pageNum
				this.load()
			}
			
			
		}
		
	  };
</script>

<style scoped>

</style>